<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery和CSS3精美翻页式电子时钟特效|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
    <link rel="stylesheet" type="text/css" href="css/normalize.css" />
    <!--CSS RESET-->
    <link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
    <!--演示页面样式，使用时可以不引用-->
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="htmleaf-container">
        <header class="htmleaf-header">
            <h1>jQuery和CSS3精美翻页式电子时钟特效 <span>A A pretty jQuery & CSS3 Clock</span></h1>
            <div class="htmleaf-links">
                <a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
                <a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/jQuery/Layout-Interface/201807105218.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
            </div>
        </header>
        <main>
            <div style="display:none">
                <div id="top-test-anim" class="num-anim top-anim" style="display:none;">
                    <div class="top-half-num">2</div>
                </div>
                <div id="bottom-test-anim" class="num-anim bottom-anim" style="display:none;">
                    <div class="bottom-half-num">
                        <div class="dropper">3</div>
                    </div>
                </div>
            </div>
            <canvas id="my-canvas"></canvas>
            <div id="clock">
                <div class="time-container hours">
                    <div class="digit">
                        <div class="fade">&nbsp;</div>
                        <span class="num top" id="hour-tens-top">1</span>
                        <span class="num bottom" id="hour-tens-bottom">
		          <div class="bottom-container">1</div></span>
                        <div class="swapper">
                            <div id="top-hour-tens-anim" class="num-anim top-anim" style="display:none;">
                                <div class="top-half-num">8</div>
                            </div>
                            <div id="bottom-hour-tens-anim" class="num-anim bottom-anim" style="display:none;">
                                <div class="bottom-half-num">
                                    <div class="dropper">9</div>
                                </div>
                            </div>
                        </div>
                        <div class="ring ring-left"></div>
                        <div class="ring ring-right"></div>
                    </div>
                    <div class="digit">
                        <div class="fade">&nbsp;</div>
                        <span class="num top" id="hour-ones-top">3</span>
                        <span class="num bottom" id="hour-ones-bottom">
		          <div class="bottom-container">3</div></span>
                        <div class="swapper">
                            <div id="top-hour-ones-anim" class="num-anim top-anim" style="display:none;">
                                <div class="top-half-num">8</div>
                            </div>
                            <div id="bottom-hour-ones-anim" class="num-anim bottom-anim" style="display:none;">
                                <div class="bottom-half-num">
                                    <div class="dropper">9</div>
                                </div>
                            </div>
                        </div>
                        <div class="ring ring-left"></div>
                        <div class="ring ring-right"></div>
                    </div>
                </div>
                <div class="time-container minutes">
                    <div class="digit">
                        <div class="fade">&nbsp;</div>
                        <span class="num top" id="minute-tens-top">4</span>
                        <span class="num bottom" id="minute-tens-bottom">
		          <div class="bottom-container">4</div></span>
                        <div class="swapper">
                            <div id="top-minute-tens-anim" class="num-anim top-anim" style="display:none;">
                                <div class="top-half-num">8</div>
                            </div>
                            <div id="bottom-minute-tens-anim" class="num-anim bottom-anim" style="display:none;">
                                <div class="bottom-half-num">
                                    <div class="dropper">9</div>
                                </div>
                            </div>
                        </div>
                        <div class="ring ring-left"></div>
                        <div class="ring ring-right"></div>
                    </div>
                    <div class="digit">
                        <div class="fade">&nbsp;</div>
                        <span class="num top" id="minute-ones-top">3</span>
                        <span class="num bottom" id="minute-ones-bottom">
		          <div class="bottom-container">3</div></span>
                        <div class="swapper">
                            <div id="top-minute-ones-anim" class="num-anim top-anim" style="display:none;">
                                <div class="top-half-num">8</div>
                            </div>
                            <div id="bottom-minute-ones-anim" class="num-anim bottom-anim" style="display:none;">
                                <div class="bottom-half-num">
                                    <div class="dropper">9</div>
                                </div>
                            </div>
                        </div>
                        <div class="ring ring-left"></div>
                        <div class="ring ring-right"></div>
                    </div>
                </div>
                <div class="time-container seconds">
                    <div class="digit">
                        <div class="fade">&nbsp;</div>
                        <span class="num top" id="second-tens-top">5</span>
                        <span class="num bottom" id="second-tens-bottom">
		          <div class="bottom-container">5</div></span>
                        <div class="swapper">
                            <div id="top-second-tens-anim" class="num-anim top-anim" style="display:none;">
                                <div class="top-half-num">8</div>
                            </div>
                            <div id="bottom-second-tens-anim" class="num-anim bottom-anim" style="display:none;">
                                <div class="bottom-half-num">
                                    <div class="dropper">9</div>
                                </div>
                            </div>
                        </div>
                        <div class="ring ring-left"></div>
                        <div class="ring ring-right"></div>
                    </div>
                    <div class="digit">
                        <div class="fade">&nbsp;</div>
                        <span class="num top" id="second-ones-top">3</span>
                        <span class="num bottom" id="second-ones-bottom">
		          <div class="bottom-container">2</div></span>
                        <div class="swapper">
                            <div id="top-second-ones-anim" class="num-anim top-anim" style="display:none;">
                                <div class="top-half-num">2</div>
                            </div>
                            <div id="bottom-second-ones-anim" class="num-anim bottom-anim" style="display:none;">
                                <div class="bottom-half-num">
                                    <div class="dropper">3</div>
                                </div>
                            </div>
                        </div>
                        <div class="ring ring-left"></div>
                        <div class="ring ring-right"></div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="js/clock.js" type="text/javascript"></script>
</body>

</html>